// 库引入
import React, {Component} from 'react';
import {observer, inject} from 'mobx-react';
import {Switch, HashRouter as Router, Route, Redirect} from 'react-router-dom';
import loadable from 'react-loadable';
import {BackTop} from 'antd';
// 组件引入
import {LoadableSpin} from './components/LoadableSpin';
import {SpinModal} from './components/SpinModal';
import {ScrollToTop} from './components/ScrollToTop';

// 404页
const PageNotFound = loadable({
  loader: () => import ('./pages/NotFound').then(({PageNotFound}) => PageNotFound),
  loading: LoadableSpin
});

// 列表页
const InjectPageLibrarylist = loadable({
  loader: () => import ('./pages/Librarylist').then(({InjectPageLibrarylist}) => InjectPageLibrarylist),
  loading: LoadableSpin
});

// 详情页
const InjectPageLibraryDetails = loadable({
  loader: () => import ('./pages/LibraryDetails').then(({InjectPageLibraryDetails}) => InjectPageLibraryDetails),
  loading: LoadableSpin
});

@inject(({uiStore}) => ({showModalLoading: uiStore.modalLoading.show}))
@observer
class App extends Component {
  render() {
    return (
      <Router>
        <div className="app height100">
          <Switch>
            <Route path="/library-list/all" component={InjectPageLibrarylist}/>
            <Route path="/library-list" component={InjectPageLibrarylist}/>
            <Route path="/library-details/:id" component={InjectPageLibraryDetails}/>
            <Redirect exact from="/" to="/library-list"/>
            <Route component={PageNotFound}/>
          </Switch>
          {/* SpinModal在整个应用中仅用渲染一次 */}
          <SpinModal visible={this.props.showModalLoading}/> {/* ScrollToTop在整个应用中仅用渲染一次 */}
          <ScrollToTop/>
          {/* BackTop和ScrollToTop不一样 */}
          <BackTop style={{
            right: 10
          }}/>
        </div>
      </Router>
    );
  }
}

export default App;
